<template>
  <div class="cmscomen accountMana">
    <div class="infoTable" :style="{ paddingLeft: paddingWidth + 'px'}">
      <div class="topMenu">
        <span>信息流数据管理</span>
        <span style="padding:0 4px;">/</span>
        <span class="two">账号管理</span>
      </div>
      <div class="formInfo">
        <el-select v-model="platform_items.model_value" :placeholder="platform_items.placeHolder" clearable @change="pro" filterable>
            <el-option
                v-for="item in platform_items.options"
                :key="item.platformId"
                :label="item.platformName"
                :value="item.platformId">
            </el-option>
        </el-select>
        <el-select v-model="pro_items.model_value"
                    :placeholder="pro_items.placeHolder"
                    clearable @change="infoPro" filterable>
            <el-option
                v-for="item in pro_items.options"
                :key="item.productId"
                :label="item.productName"
                :value="item.productId">
            </el-option>
        </el-select>
        <el-select v-model="status_items.model_value"
                    :placeholder="status_items.placeHolder" class="con_select unBorderRadius"
                    filterable clearable @change="infoState">
            <el-option
                v-for="item in status_items.options"
                :key="item.id"
                :label="item.val"
                :value="item.id">
            </el-option>
        </el-select>
        <el-input @keyup.13.native="serchInfo" style="width:217px" v-model="value" placeholder="请输入账号查询" clearable></el-input>
      </div>
      <div class="accountBtn">
        <el-row>
          <el-button type="primary" @click="importData">导出数据</el-button>
          <el-button type="primary" @click="newBuilt">新建账号</el-button>
        </el-row>
      </div>
      <div class="accountWra">
        <div class="AccounTop"></div>
        <div class="AccountableWar gxw-con">
            <el-table
                :data="tableData"
                border
                stripe
                style="width: 100%"
                v-loading="loading"
                element-loading-text="拼命加载中"
            >
                <el-table-column
                    sortable
                    prop="name"
                    label="账号名称"
                    min-width="150"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                    label="密码"
                    min-width="70"
                    class-name="exitInput copyInput">
                    <template slot-scope="scope">
                        <div>
                            <span class="inlineBox r_span copyPassBtn" :data-clipboard-text="scope.row.pwd" @click="copypass">复制密码</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    v-for="c in table_column"
                    :key="c.prop"
                    :fixed="c.fixed"
                    :sortable="c.sortable"
                    :prop="c.prop"
                    :label="c.label"
                    :formatter="c.format"
                    width="auto"
                    :min-width="c.minwidth"
                    v-if="c.visible"
                    :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="120"
                    class-name="exitBut"
                    align="center">
                    <template slot-scope="scope">
                        <div>
                            <el-tooltip class="item" effect="dark" content="充值" placement="top">
                                <el-button style="padding:3px 3px" type="success" class="inlineBox icon iconfont icon-chongzhijiaofei" circle @click.stop="recharge(scope.row.id,scope.row.platformId,scope.row.productName,scope.row.name)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="明细" placement="top">
                                <el-button style="padding:3px 3px" type="info" class="inlineBox icon iconfont icon-mingxitiaozhang" circle @click.stop="detail(scope.row.id)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="修改" placement="top">
                                <el-button style="padding:3px 3px" type="primary" class="inlineBox icon iconfont icon-tubiao109" circle @click.stop="editAccount(scope.row.id)"></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="禁用" placement="top">
                                <el-button style="padding:3px 3px" type="danger" v-if="!scope.row.deleted" class="inlineBox icon iconfont icon-jinyong" @click.stop="deleteAccount(scope.row.id)" circle></el-button>
                            </el-tooltip>
                            <el-tooltip class="item" effect="dark" content="修改" placement="top">
                                <el-button style="padding:3px 3px" type="danger" v-if="scope.row.deleted" class="inlineBox icon iconfont icon-jinyong" circle></el-button>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="page.currentPage"
              :page-sizes="page.sizes"
              :page-size="page.limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.count">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name:'accountData',
  data(){
    return{
      currentPage4: 4,
      value: '',
      value1: '',
      loading:false,
      tableData: [],
      table_column: [
          {fixed: false, prop: 'productName', label: '产品', sortable: false, visible: true},
          {fixed: false, prop: 'amount', label: '当前余额', sortable: false, visible: true,minwidth:100},
          // {fixed: false, prop: 'operator', label: '运营人', sortable: false, visible: true,minwidth:100},
          {fixed: false, prop: 'platformName', label: '平台', sortable: false, visible: true,minwidth:100},
          {fixed: false, prop: 'deleted', label: '状态', sortable: false, visible: true,minwidth:80,format:function (row,col) {
              switch (row.deleted){
                  case false:row.statusFormat='执行中';return '执行中';break;
                  case true:row.statusFormat='已关闭';return '已关闭';break;
              }
          }},
      ],
      platform_items: {
          model_value: '',
          placeHolder: '平台',
          options: [
          ]
      },
      status_items: {
          model_value: '',
          placeHolder: '状态',
          options: [
              {
                  id:false,
                  val:'执行中'
              },
              {
                  id:true,
                  val:'已关闭'
              },
          ]
      },
      pro_items: {
          model_value: '',
          placeHolder: '产品',
          options: []
      },
      importCities: [ '账号名称','密码','产品', '当前余额', '平台', '状态'],
      citiesFilterVal: [ 'name', 'pwd', 'productName', 'amount', 'platformName', 'statusFormat'],
      page: {
          sizes: [10, 20, 50,100,200,500],
          offset: 1,
          limit: 10,
          count: 0,
          currentPage: 1,
      },
    }
  },
  computed:{
    paddingWidth(){
      return this.$store.state.paddingWidth;
    }
  },
  created(){
    this.platform();
    this.pageInfo();
  },
  methods:{
      cancelQuest(){
        if(typeof this.source ==='function'){
            this.source('终止请求'); //取消请求
        }
      },
      /*回车搜索账号数据*/
      serchInfo(){
        console.log(1);
      },
      /*平台*/
      platform(){
          this.$http({
              method: 'get',
              url: this.apiUrl.fdpPlaGetPlatformList,
          }).then(res => {
              if (res.status == 200) {
                  var data = res.data;
                  this.platform_items.options = data;
              } else {
              }
          }).catch(error => {
              console.log(error);
          });
      },
      /*产品*/
      pro() {
          this.$http({
              method: 'get',
              url: this.apiUrl.fdpProListall,
              params:{
                  platformId:this.platform_items.model_value
              }
          }).then(res => {
              if (res.status == 200) {
                  var data = res.data;
                  this.pro_items.options = data;
              } else {
              }
          }).catch(error => {
              console.log(error);
          });
          this.pageInfo()
      },
      infoPro(){
        this.pageInfo();
      },
      infoState(){
        this.pageInfo();
      },
      /*查询表格数据*/
      pageInfo() {
          this.tableData=[];
          this.loading=true;
          this.cancelQuest(); //在请求发出前取消上一次未完成的请求
          const _this = this;
          this.$http({
              method: 'get',
              url: this.apiUrl.fdpAccSearchAccount,
              params: {
                  offset: this.page.offset,
                  limit: this.page.limit,
                  platformId: this.platform_items.model_value,
                  productId: this.pro_items.model_value,
                  name: this.accountName,
                  deleted: this.status_items.model_value,
              },
              cancelToken: new axios.CancelToken(function executor(c) {_this.source = c;})
          }).then(res => {
              console.log(res);
              if (res.status = 200) {
                  this.page.count = res.data.totalNums;
                  this.tableData = res.data.items;
                  this.loading=false;
              }
          }).catch(err => {
              if (axios.isCancel(err)) {
                    console.log('Request canceled', err.message);
                } else {
                }
          });
      },
      /*查询明细表格数据*/
      depositInfo(id) {
          this.billStatus=true;
          this.$http({
              method: 'get',
              url: this.apiUrl.fdpAccSearchAccountDeposit,
              params: {
                  offset: this.bill_page.offset,
                  limit: this.bill_page.limit,
                  accountId: id,
              }
          }).then(res => {
              console.log(res);
              if (res.status = 200) {
                  this.bill_page.count = res.data.totalNums;
                  this.tableDataBillDetail = res.data.items;
              }
          }).catch(err => {

          });
      },
      /*页码翻页*/
      handleCurrentChange(val) {
          this.page.offset = val;
          this.pageInfo();
      },
      /*改变每页条数*/
      handleSizeChange(val) {
          this.page.limit = val;
          this.pageInfo();
      },
      /*页码翻页*/
      handleCurrentChangeBill(val) {
          this.bill_page.offset = val;
          this.depositInfo();
      },
      /*改变每页条数*/
      handleSizeChangeBill(val) {
          this.bill_page.limit = val;
          this.depositInfo();
      },
      /*导出*/
      importData() {
          if (this.tableData.length == 0) {
              this.$metableDatassage({
                  type: 'info',
                  message: '请查询数据'
              });
              return false;
          }
          let tHeader = this.importCities;
          let filterVal = this.citiesFilterVal;
          let importData = this.tableData;
          let fileName = [this.platform_items.model_value,this.pro_items.model_value,this.status_items.model_value, '账号数据'].join('_');
          this.handleDownload(tHeader, filterVal, importData, fileName);
      },
      /*复制密码*/
      copypass(){
          const clipboard = new Clipboard('.copyPassBtn');
          this.$message({
              type: 'success',
              message: '复制成功'
          });
      },
    //   /*充值*/
    //   recharge(accountId,platformId,pro,account){
    //       this.examineStatus=true;
    //       this.examine_from.accountId=accountId;
    //       this.examine_from.platformId=platformId;
    //       this.examineName=account;
    //       this.examinePro=pro;
    //   },
      /*提交充值审批*/
      onSubmit(){
          if(this.examine_from.amount==''){
              this.$message({
                  type: 'info',
                  message: '请输入充值金额'
              });
              return false;
          }else if(this.examine_from.amount==0){
              this.$message({
                  type: 'info',
                  message: '充值金额不能为0'
              });
              return false;
          }
          this.$http({
              method: 'post',
              url: this.apiUrl.fdpAccAccountDeposit,
              data: this.examine_from,
          }).then(res => {
              console.log(res);
              if (res.status == 200) {
                  var data = res.data;
                  if(data.status==1){
                      this.$message({
                          type: 'success',
                          message: '充值成功'
                      });
                      this.examineStatus=false;
                      this.pageInfo();
                  }else if(data.status==2){
                      this.$message({
                          type: 'error',
                          message: data.msg
                      });
                  }
              } else {
                  this.$message({
                      type: 'error',
                      message: '充值失败，请重新提交'
                  });
              }
          }).catch(error => {
              console.log(error);
              this.$message({
                  type: 'error',
                  message: '请重新提交'
              });
          });
      },
      /*修改账号*/
      editAccount(id){
          this.$router.push({
              path: 'accountManaNew',
              query: {id: id}
          });
      },
      /*删除账号*/
      deleteAccount(id) {
          this.$confirm('此操作将永久禁用该账号, 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
          }).then(() => {
              this.$http({
                  method: 'delete',
                  url: this.apiUrl.fdpAccDel,
                  params: {id: id}
              }).then(res => {
                  if (res.status == 200) {
                      this.$message({
                          type: 'success',
                          message: '修改成功!'
                      });
                      this.pageInfo();
                  } else {
                      this.$message({
                          type: 'error',
                          message: '修改失败!'
                      });
                  }
              }).catch(error => {
                  this.$message({
                      type: 'error',
                      message: '修改失败!'
                  });
              });
          }).catch(() => {
              this.$message({
                  type: 'info',
                  message: '已取消修改'
              });
          });
      },
      /*新建账号*/
      newBuilt(){
          this.$router.push({path:'/infoFlowData/newAccountNumber'})
      },
      /*帐户充值*/
      recharge(){
          this.$router.push({path:'/infoFlowData/applicationForAccountRecharge'})
      },

      /*充值明细*/
      detail(){
          this.$router.push({path:'/infoFlowData/accountRechargeDetails'})
      }
  }
}
</script>
<style>
.accountMana .infoTable{
  width: 100%;
}
.inlineBox .icon-chongzhijiaofei,.inlineBox .icon-jinyong,.inlineBox .icon-mingxitiaozhang,.inlineBox .icon-tubiao109{
    padding-left: 10px;
    cursor: pointer;
    vertical-align: middle;
    padding: 0;
    font-size: 12px;
}
</style>